<template>
  <div class="os-404">
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         x="0px"
         y="0px"
         viewBox="0 0 200 82.7"
         style="enable-background:new 0 0 200 82.7;"
         xml:space="preserve"
         fill="url(#jbfont)">
      <defs>
        <linearGradient id="jbfont"
                        x1="0%"
                        y1="0%"
                        x2="100%"
                        y2="0">
          <stop offset="0%"
                stop-color="#41D1FF"></stop>
          <stop offset="50%"
                stop-color="#BD34FE"></stop>
          <stop offset="100%"
                stop-color="#FFA800"></stop>
        </linearGradient>
      </defs>
      <defs>
        <linearGradient id="jbfont2"
                        x1="0%"
                        y1="0%"
                        x2="100%"
                        y2="100%">
          <stop offset="0%"
                stop-color="#000000"></stop>
          <stop offset="100%"
                stop-color="#434343"></stop>
        </linearGradient>
      </defs>
      <g>
        <text transform="matrix(1.2187 0 0 1 13 75.6393)"
              class="st0 st1">4</text>
        <text transform="matrix(1.2187 0 0 1 133.0003 73.6393)"
              class="st0 st1">4</text>
      </g>
      <g>
        <g>
          <path id="XMLID_11_"
                d="M81.8,29.2c4.1-5.7,10.7-9.4,18.3-9.4c6.3,0,12.1,2.7,16.1,6.9c0.6-0.4,1.1-0.7,1.7-1.1
		c-4.4-4.8-10.8-7.9-17.8-7.9c-8.3,0-15.6,4.2-20,10.6C80.7,28.5,81.3,28.8,81.8,29.2z"></path>
          <path id="XMLID_2_"
                d="M118.1,53.7c-4,5.7-10.7,9.5-18.2,9.5c-6.3,0-12.1-2.6-16.2-6.8c-0.6,0.4-1.1,0.7-1.7,1.1
		c4.4,4.8,10.8,7.8,17.9,7.8c8.3,0,15.6-4.3,19.9-10.7C119.2,54.5,118.6,54.1,118.1,53.7z"></path>
          <animateTransform attributeName="transform"
                            type="rotate"
                            from="360 100 41.3"
                            to="0 100 41.3"
                            dur="6s"
                            repeatCount="indefinite">
          </animateTransform>
        </g>
        <g id="XMLID_6_">
          <g id="XMLID_18_">
            <circle class="circle"
                    cx="100"
                    cy="41"
                    r="1"
                    fill="url(#jbfont2)">
            </circle>
          </g>
        </g>
        <defs>
          <filter id="blurFilter4"
                  x="-20"
                  y="-20"
                  width="200"
                  height="200">
            <feGaussianBlur in="SourceGraphic"
                            stdDeviation="2"></feGaussianBlur>
          </filter>
        </defs>

        <path id="XMLID_5_"
              d="M103.8,16.7c0.1,0.3,0.1,0.6,0.1,0.9c11.6,1.9,20.4,11.9,20.4,24.1c0,13.5-10.9,24.4-24.4,24.4
  S75.6,55.1,75.6,41.7c0-3.2,0.6-6.3,1.7-9.1c-0.3-0.2-0.5-0.3-0.7-0.5c-1.2,3-1.9,6.2-1.9,9.6c0,14,11.3,25.3,25.3,25.3
  s25.3-11.3,25.3-25.3C125.3,29,115.9,18.5,103.8,16.7z"></path>
      </g>
    </svg>
    <div class="os-404__error">Error 404: Page not found. <a @click="$router.push('/')">Back&lt;</a></div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: '404',
  })
</script>

<style lang="scss" scoped>
  @include b(404) {
    margin-top: 15%;
    text-align: center;
    @include e(error) {
      margin: 0 auto;
      width: 370px;
      padding: 10px 0;
      color: #1ff042;
      font-family: 'AndaleMono', monospace;
      box-shadow: 0px 10px 10px 10px rgb(45 45 45 / 10%), inset 0px -2px 0px rgb(121 121 121 / 15%), inset 0px 2px 5px #312727;
      border-radius: 10px;
      text-align: center;
      letter-spacing: 2px;
      a {
        text-decoration: underline;
        cursor: pointer;
      }
    }
    svg {
      width: 500px;
      height: 180px;
      text-align: center;
      .st0 {
        font-family: 'FootlightMTLight';
      }
      .st1 {
        font-size: 80px;
      }

      path#XMLID_5_ {
        filter: url(#blurFilter4);
      }
      .circle {
        animation: out 2s infinite ease-out;
      }
    }
    @keyframes out {
      0% {
        r: 1;
        opacity: 0.9;
      }
      // 25% {
      //   r: 5;
      //   opacity: 0.3;
      // }
      // 50% {
      //   r: 10;
      //   opacity: 0.2;
      // }
      // 75% {
      //   r: 15;
      //   opacity: 0.1;
      // }
      100% {
        r: 20;
        opacity: 0;
      }
    }
  }
</style>